<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      #txt {
        border: 1px solid #DCDCDC;
        border-radius: 5px;
        padding: 7px 9px;
      }
    </style>
	</head>
	<body>
    <input type="text" id="txt">
    
    <script src="../src/colorpicker.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      
      let tx = document.querySelector('#txt');
      
      let cp = new colorpicker();
      
      // 设置指向容器选择器
      cp.elem = '#txt';
      
      // 设置默认颜色
      cp.color = '#FF0';
      
      // 开启透明度
      cp.alpha = true;
      
      // 开启预定义颜色
      cp.predefine = true;
      
      // 设置预定义颜色（与 predefine 配套使用，predefine 为 true 才会生效）
      cp.colors = ['#FF0000', '#DCDCDC', '#5FB878', '#009688', '#393D49', '#FFB800', '#FF5722', '#01AAED'];
      
      // 设置选择器根节点的 z-index 属性
      cp.zIndex = 1024;
      
      // 设置颜色显示/输出格式
      // cp.format = 'hex';
      // cp.format = 'rgb';
      cp.format = 'rgba';
      
      // 设置颜色改变回调
      cp.change = color => {
        tx.style.color = color;
        tx.style.borderColor = color;
      };
      
      // 设置颜色选择回调
      cp.done = color => tx.value = color;
      
      // 创建
      cp.render();
    </script>
	</body>
</html>
